<!--suppress ALL -->
<!--
  time： 2019-02-21
  author： 俞昊
  appendix: 添加详情状态下整行配置
  配置： wrap:true(具体如下)
    list: [{ key: "描述", prop: "description", wrap: true }]
------------------------------------------------------------
  time： 2019-02-25
  author： 俞昊
  appendix: 修改逻辑规则修正v-for与v-if在同一vdom节点上混合使用的警报；添加图片
  配置，添加type，值为image,value使用数组形式
    list: [{ key: "描述", prop: "description", wrap: true, type: 'image', value: ['1111.png'] }]
------------------------------------------------------------
  time： 2019-02-26
  author： 俞昊
  appendix: 添加discard，值为true时会取消使用对应的表单项
  具体使用如下:
     1.@selectchange="selectchange" 通过selectchange触发选择改变
     2.selectchange({ key, item }) {
        const { codeValue } = item
        if (key === 'isOpen' && codeValue === '1') {
          this.list.find(i => i.prop === 'areaTwoId').discard = true
        } else if (key === 'isOpen') {
          this.list.find(i => i.prop === 'areaTwoId').discard = false
        }
      },
      在selectchange中编写业务逻辑,通过配置discard属性来决定对应prop表单项的使用与否
------------------------------------------------------------
  time： 2019-02-26
  author： 俞昊
  appendix: 添加名为topRight的slot,为右上角按钮
-->
<template>
  <div v-show="showDetail" class="custom-infodetail">
    <files-pop ref="filespop" :title="poptitle"></files-pop>
    <section class="all-body">
      <div class="headerTitle" v-if="headerTitle">
        <span>{{ headerTitle }}</span>
        <slot name="topRight"></slot>
      </div>
      <ul class="allList">
        <template v-if="type === 1">
          <li
            v-for="(item, index) in allList"
            :key="index"
            :class="{
              'full-row': item.wrap === true,
              image: item.type === 'image' || item.type === 'files',
            }"
            v-show="item.show ? item.show(item, allList) : true"
          >
            <template
              v-if="
                item.type !== 'image' &&
                item.type !== 'files' &&
                item.type !== 'contentarea'
              "
            >
              <span
                style="
                  display: inline-block;
                  max-width: 150px;
                  text-align: left;
                  flex-wrap: wrap;
                "
              >
                {{ item.key }}
                <template v-if="item.tip">
                  <c-tooltip
                    class="item"
                    effect="dark"
                    :content="item.tip"
                    placement="top-start"
                  >
                    <i class="el-icon-warning-outline"></i>
                  </c-tooltip> </template
                >：
              </span>
              <div class="content-warp">
                {{ getvalue(item) }}
                <span class="detail" v-if="item.url" @click="linkto(item.url)"
                  >(详情)</span
                >
              </div>
            </template>
            <template v-else-if="item.type === 'image'">
              <span
                style="
                  display: inline-block;
                  max-width: 150px;
                  text-align: left;
                  flex-wrap: wrap;
                "
                >{{ item.key }}:</span
              >
              <div class="content-warp">
                <ul
                  class="imgs clearfix"
                  v-if="item.value && item.value.length"
                >
                  <template v-for="(img, imgIndex) in item.value">
                    <li
                      :key="imgIndex"
                      :style="getImageStyle(item, img)"
                      v-if="img"
                      @click="preclick(item.value, 'image', item.key)"
                    ></li>
                  </template>
                </ul>
                <ul class="imgs clearfix" v-else-if="item.emptyImage">
                  <li :style="getImageStyle({}, item.emptyImage)"></li>
                </ul>
                <template v-else>--</template>
              </div>
            </template>
            <template v-else-if="item.type === 'files'">
              <span
                style="
                  display: inline-block;
                  max-width: 140px;
                  text-align: left;
                  flex-wrap: wrap;
                "
                >{{ item.key }}:</span
              >
              <div class="content-warp">
                <ul
                  class="imgs clearfix files"
                  v-if="
                    item.value &&
                    item.value instanceof Array &&
                    item.value.length
                  "
                >
                  <!-- item.value -->
                  <li
                    @click="handleClick(item.value, 'image', item.key)"
                    v-if="getfiletlist(item.value, 'image').length"
                    class="list-file-image"
                  ></li>
                  <li
                    @click="handleClick(item.value, 'audio', item.key)"
                    v-if="getfiletlist(item.value, 'audio').length"
                    class="list-file-audio"
                  ></li>
                  <li
                    @click="handleClick(item.value, 'video', item.key)"
                    v-if="getfiletlist(item.value, 'video').length"
                    class="list-file-video"
                  ></li>
                </ul>
                <div v-else>--</div>
              </div>
            </template>
            <template v-else-if="item.type === 'contentarea'">
              <!-- 富文本区域 -->
              <span
                style="
                  display: inline-block;
                  max-width: 140px;
                  text-align: left;
                  flex-wrap: wrap;
                "
                >{{ item.key }}:</span
              >
              <div
                class="contentarea-warp content-warp"
                v-html="getvalue(item)"
              ></div>
            </template>
          </li>
        </template>
        <template v-else-if="type === 2" v-for="(item, index) in allList">
          <c-form
            class="koform"
            ref="form"
            :class="
              item.inputType === 'textarea'
                ? 'liactive'
                : item.inputType === 'timestart'
                ? 'timeactive'
                : ''
            "
            label-width="150px"
            :key="index"
          >
            <c-form-item
              :label="item.key"
              :rules="{
                required: item.require,
                message: '请添加数据内容',
                trigger: ['blur', 'change'],
              }"
              v-if="item.discard !== true"
            >
              <c-select
                v-model="sel[item.prop]"
                @change="getSelect(item)"
                :placeholder="item.placeholder || '请选择'"
                :disabled="item.disabled"
                v-if="item.inputType === 'select'"
              >
                <c-option
                  v-for="(i, index) in item.options"
                  :key="index"
                  :value="i.text"
                ></c-option>
              </c-select>
              <c-time-picker
                v-else-if="item.inputType === 'time'"
                v-model="prop[item.prop]"
                format="HH:mm"
                :selectableRange="new Date().format('HH:mm') + ' - 23:59'"
                :placeholder="item.placeholder || '请选择'"
              ></c-time-picker>
              <c-time-picker
                v-else-if="item.inputType === 'timepicker'"
                is-range
                @change="getTime(item)"
                v-model="item.value"
                range-separator="至"
                format="HH:mm"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              ></c-time-picker>
              <!-- @change="handleChange" -->
              <c-input-number
                v-model="prop[item.prop]"
                :min="item.min || 1"
                :max="item.max"
                :placeholder="item.placeholder || '请输入内容'"
                v-else-if="item.inputType === 'number'"
              ></c-input-number>
              <c-input
                @blur="getInputValue(item)"
                :value="item.value"
                v-else
                :maxlength="item.maxLength || 20"
                :type="item.inputType"
                :class="index === allList.length - 1 ? '' : 'enter'"
                resize="none"
                :autosize="{ minRows: 6, maxRows: 6 }"
                v-model="prop[item.prop]"
                :placeholder="item.placeholder || '请输入内容'"
                :disabled="item.disabled"
                :max="item.max"
                :min="item.min"
              ></c-input>
            </c-form-item>
          </c-form>
        </template>
      </ul>
    </section>
    <slot
      style="width: 100%; border-top: 1px solid #ddd"
      name="slotMaps"
    ></slot>
    <div class="slotbtn" v-if="type === 2">
      <c-button @click="backRoot(back)" class="btnColor2" type="danger">{{
        cancelText
      }}</c-button>
      <c-button @click="saveData()" class="btnColor" type="primary">{{
        saveText
      }}</c-button>
    </div>
    <!--<c-button @click="saveData()">返回</c-button>-->
  </div>
</template>

<script>
// import fileRow from '@/component/filespop/filesrow.vue'
import filesPop from '@/component/filespop.vue'
export default {
  name: '',
  // props: ['allList', 'type', 'headerTitle'],
  components: {
    filesPop,
    // fileRow
  },
  props: {
    allList: {
      type: Array,
      default: () => {
        return [
          {
            key: '停车场总称', // 冒号或者input前面的字
            value: '雪糕啊', // 框里或者冒号后面的字
            url: 'www.baidu.com', // 带详情的url
            disabled: true, // 控制input能不能用
            inputType: 'select', // 判断是不是select or textarea
            prop: 'name', // 字段key
            options: [
              { key: 1, text: 1 },
              { key: 2, text: 2 },
            ], // 父组件接收的select数据
            sel: 'key', // 固定key
            require: true, // 非空校验
          },
        ]
      },
    },
    type: {
      type: Number, // 编辑或者查看的类型 1是文字 2是input
    },
    headerTitle: {
      type: String, // 头部标题自定义
    },
    back: {
      type: Function, // 返回按钮
    },
    saveText: {
      type: String, // 保存按钮
      default: '保存',
    },
    cancelText: {
      type: String, // 取消按钮
      default: '取消',
    },
  },
  data() {
    return {
      poptitle: '',
      prop: {},
      sel: {}, // 用來保存下拉框的v-model的值，防止v-model修改props
      a: [], // 判断是否为空
      b: [], // 为空的key
      c_type: '',
      showDetail: false,
    }
  },
  methods: {
    getImageStyle({ imgSize }, img) {
      let str = ''
      const str1 = img === '-' || !img ? '' : `background-image: url(${img});`
      str = str + str1
      if (
        imgSize &&
        ~Object.prototype.toString.call(imgSize).indexOf('Object')
      ) {
        const str2 = imgSize.height
          ? `height:${imgSize.height} !important;`
          : ''
        const str3 = imgSize.width ? `width:${imgSize.width} !important;` : ''
        str = str + str2 + str3
      }
      return str
    },
    getfiletlist(list, type) {
      return list.filter((i) => i.fileType === type)
    },
    preclick(list, type, title) {
      list = list.map((i) => ({ url: i, fileType: type }))
      this.handleClick(list, type, title)
    },
    handleClick(list, type, title) {
      const info = {
        files: list.filter((i) => i.fileType === type),
        fileType: type,
      }
      console.log(info)
      // console.log(info)
      this.$refs.filespop.setFiles(info)
      this.$refs.filespop.visible = true
      this.poptitle = title || '预览'
    },
    getfileimg(fileinfo) {
      let img = ''
      switch (fileinfo.fileType) {
        case 'image':
          img = fileinfo.url
          break
        case 'audio':
          img = 'detail_icon_audio'
          break
        case 'video':
          img = 'detail_icon_media'
          break
        default:
          break
      }
      return img
    },
    getvalue({ value, format }) {
      if (!value && value !== 0) return '--'
      if (format && typeof format === 'function') return format(value)
      return value
    },
    linkto(url) {
      this.$emit('toUrl', url)
    },
    getSelect(obj) {
      obj.options.forEach((item) => {
        if (item.text === this.sel[obj.prop]) {
          this.prop[obj.prop] = item[obj.prop]
          this.$emit('selectchange', { key: obj.prop, item })
        }
      })
    },
    getTime(obj) {
      this.prop[obj.prop] = obj.value
      // console.log(obj.value, 'getTime', this.prop)
    },
    // 删除数组
    removeArray(_arr, _obj) {
      var length = _arr.length
      for (var i = 0; i < length; i++) {
        if (_arr[i] === _obj) {
          if (i === 0) {
            _arr.shift()
            return _arr
          } else if (i === length - 1) {
            _arr.pop()
            return _arr
          } else {
            _arr.splice(i, 1)
            return _arr
          }
        }
      }
    },
    getInputValue(item) {
      this.b.forEach((bitem) => {
        // console.log(bitem.prop, item.prop, '*/*/*/', this.prop[item.prop])
        if (
          bitem.prop === item.prop &&
          this.prop[item.prop]
            .toString()
            .replace(/^\s+|\s+$/g, '')
            .charAt(0) !== ''
        ) {
          // this.removeArray(this.b, item)
          // console.log(this.b, this.prop[item.prop], bitem.prop === item.prop, this.prop[item.prop] !== '')
        }
        if (
          item.require === true &&
          bitem.prop === item.prop &&
          this.prop[item.prop]
            .toString()
            .replace(/^\s+|\s+$/g, '')
            .charAt(0) === ''
        ) {
          this.b.push(item)
        }
      })
      // console.log('/****', item)
      // console.log('+++', this.b, item.prop, this.prop[item.prop])
    },
    // 保存按钮
    saveData() {
      const prop = this.$deepCopy(this.prop)
      const allList = this.$deepCopy(
        this.allList.filter((item) => item.discard === true)
      )
      allList.forEach((item) => {
        delete prop[item.prop]
      })
      // console.log('saveData:::', prop, allList)
      // console.log(this.prop[this.a], this.prop, this.a, this.b)
      var flag = 1
      for (var i = 0; i < this.a.length; i++) {
        var str = prop[this.a[i]]
          .toString()
          .replace(/^\s+|\s+$/g, '')
          .charAt(0)
        if (prop[this.a[i]] === '' || prop[this.a[i]] === null || str === '') {
          flag = 0
          console.log(i, this.b)
          this.$message({
            message: this.b[i].key + '输入框不能为空',
            type: 'error',
          })
          break
        }
      }
      if (flag === 0) {
        return
      }
      // this.a.forEach((item) => {
      //   console.log(this.prop[item])
      //   if (!this.prop[item]) {
      //     this.$message({
      //       message: '输入框不能为空',
      //       type: 'error'
      //     })
      //     return
      //   }
      // })
      // console.log(this.a, this.prop)
      this.$emit('saveBtn', prop)
    },
    // 返回按钮
    backRoot(back) {
      back()
    },
    formList() {
      const self = this
      this.allList.forEach((item, index, arr) => {
        // console.log(arr[0].value)
        self.c_type = item.type
        // console.log(self.prop[item.prop], '********', item.value)
        self.$set(
          this.prop,
          item.prop,
          item.format && typeof item.format === 'function'
            ? item.format(item.value)
            : item.value,
          item.key
        )
        if (item.require === true) {
          this.a.push(item.prop)
          this.b.push(item)
          var obj = {}
          this.b = this.b.reduce(function (item, next) {
            obj[next.key] ? '' : (obj[next.key] = true && item.push(next))
            return item
          }, [])
          console.log(arr)
          // console.log(self.prop[item.prop], self.prop, item)
          // if (self.prop[item.prop] === '') {
          //   this.prop.key = item.key
          // }
          // console.log(this.prop[item.key], this.a)
        }
        if (item.inputType === 'select') {
          self.$set(this.sel, item.prop, item.value, item.key)
          item.options.forEach((item2) => {
            if (item2.text === self.sel[item.prop]) {
              self.prop[item.prop] = item2[item.prop]
            }
          })
        }
      })
    },
    // 重置某一项并且取消验证规则
    resetItem(prop) {
      this.sel[prop] = ''
      this.prop[prop] = ''
    },
    // 增加某一项的验证规则
    addProp(prop) {
      const index = this.a.indexOf(prop)
      if (index >= 0) {
      } else {
        this.a.push(prop)
      }
    },
  },
  watch: {
    showDetail(val) {
      if (val) {
        this.formList()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.infodetail-top-right {
  width: auto;
}
.custom-infodetail {
  li.image {
    display: flex !important;
  }
  .clearfix:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .el-time-range-picker__content {
    display: flex !important;
  }
  .el-input-number {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
  .pagination .el-select {
    width: auto;
  }
  .el-time-range-picker__conten .el-time-range-picker__cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 4px 7px 7px;
    display: inline-block;
    width: 47% !important;
  }
  .el-date-editor--daterange.el-input,
  .el-date-editor--daterange.el-input__inner,
  .el-date-editor--timerange.el-input,
  .el-date-editor--timerange.el-input__inner {
    width: 100% !important;
  }
  .content-warp {
    display: inline;
    word-break: break-all;
    color: rgba(0, 0, 0, 0.65);
    flex-wrap: wrap;
    flex: 1;
  }
  .contentarea-warp {
    width: 600px;
    margin-top: 28px;
    vertical-align: top;
    flex: 1;
    display: inline-block;
    img {
      max-width: 100% !important;
      height: 200px !important;
    }
    p {
      margin-top: 0;
      margin-bottom: 8px;
      line-height: 1;
      width: 100%;
    }
  }
  ul li {
    list-style: none;
    margin: 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }

  .slotbtn {
    text-align: right;
    height: 60px;
    line-height: 60px;
  }

  .all-body {
    .headerTitle {
      padding-bottom: 16px;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.85);
      line-height: 1;
    }

    .allList {
      // padding-bottom: 24px;
      margin: 0;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding-left: 0;

      .liactive {
        width: 100% !important;
      }
      .timeactive {
        width: 20% !important;
      }
      .full-row {
        width: 100%;
      }
      // li:last-child {
      //   width: 100% !important;
      // }
      li {
        margin-bottom: 8px;
        line-height: 22px;
        float: left;
        width: 33.3%;
        text-align: left;
        display: inline;
        padding-right: 20px;
        box-sizing: border-box;
        // .enter {
        //   width: 200px;
        // }
      }
      .koform {
        margin-bottom: 8px;
        line-height: 22px;
        float: left;
        width: 33.3%;
        text-align: left;
        display: inline;
        &:last-child {
        }
        .el-form-item {
          .el-form-item__label {
            font-size: 14px !important;
            line-height: none !important;
          }
        }
      }
      .detail {
        cursor: pointer;
        color: #666;
        margin-left: 5px;
        margin-bottom: 10px;
      }
    }
  }
  ul.imgs {
    margin-top: 28px;
    padding-inline-start: 0;
    > li {
      // box-shadow: 0 0 15px 4px #dcdcdc;
      height: 80px !important;
      width: 80px !important;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      margin-right: 16px;
      margin-bottom: 0 !important;
      border-radius: 3px;
      margin-top: 10px;
      // &.list-file-image {
      //   background-image: url(~@/imgs/image.png);
      //   // box-shadow: 0 0 30px 0px #a0a0a0ed;
      // }
      // &.list-file-video {
      //   background-image: url(~@/imgs/video.png);
      //   // box-shadow: 0 0 30px 0px #8b74fe91;
      //   }
      // &.list-file-audio {
      //   background-image: url(~@/imgs/audio.png);
      //   // box-shadow: 0 0 30px 0px #30c0ebbf;
      //   }
      // >svg {
      //   height: 100%;
      //   width: 100%;
      // }
    }
  }
}
</style>
